<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./main.css">
  <title>Document</title>
</head>
<body>
  <div class="outer-box">
    <ul class="code-box">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>  
    </ul>
    <input id="codeValue" type="number">
  </div>
</body>
<script>
  const codeValue = document.querySelector('#codeValue');
  const outer = document.querySelector('.outer-box');
  const lis = document.querySelectorAll('li');
  outer.onclick = () => {
    codeValue.focus();
  }
  codeValue.onkeyup = function(e) {
    var val = e.target.value;
    if(e.target.value.length > 5) {
      e.target.value = '';
    }
    lis.forEach((value,index)=>{
      value.innerText = val[index] || '';
    })
  }
</script>
</html>